<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<title></title>
	<style type="text/css">
		.header-bar{
			height: 0.4rem;
			background-color: #FF7844;
		}
		/*图片*/
		.carousel-inner>.item>img{
			width: 100%;
			height: 32rem;
		}	
        .content-form{
        	position: absolute;
        	opacity: 0.7;
        	background-color: #fff;
        	top: 12rem;
        	right: 6%;
        }
        .content-border{
        	border-right: 0.5rem double #FF7844;
        }
        .footer{
        	background-color: #3A3A62;
        	font-size: 130%;
        	color: #fff;
        	border-top: 0.3rem solid #FF7844; 
        }
        .form1{
        	margin-top: 5%;
        }
        .btn{
        	border-radius: 1.2rem;
        	background-color:#2EA1D9;
        	font-weight: bolder;
        	color: #fff;
        	font-size: 120%;
        	text-shadow: 0 1px; 
        }
        @media screen and (max-width: 768px){
        	body{
        		font-size: 80%;
        	}
        }
		</style>
</head>
<body style="background-color: #F4F7ED;">
<!--头部-->
<div class="row ">
	    <div class="col-xs-4 col-sm-5 col-md-5">
		     <img src="../static/sucai/data_logo.svg">
	    </div>
	    <div class="col-xs-3 col-sm-4"></div>
	    <div class="col-sm-3 col-xs-2">
		     <img src="../static/sucai/header.svg">
	    </div>
</div>
<div class="row">
	<nav class="header-bar"></nav>
</div>
<!--轮播，登录表单-->
<div class="row">
	<div id="myCarousel" class="carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>   
   <!-- 轮播（Carousel）项目 -->
   <div class="carousel-inner">
      <div class="item active">
         <img src="../static/sucai/1.svg" alt="First slide">
      </div>
      <div class="item">
         <img src="../static/sucai/2.svg" alt="Second slide">
      </div>
      <div class="item">
         <img src="../static/sucai/3.svg" alt="Third slide">
      </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>
    </div>
</div>
<div class="col-xs-7 col-sm-3 content-form">
	<form method="post">
	{% csrf_token %}
		<div class="row form1">
			<div class="col-xs-2 col-sm-3">
				<label>用户名:</label>
			</div>
			<div class="col-xs-3 col-sm-9">
				<input type="text" name="username">
			</div>
		</div>
		<div class="row form1">
			<div class="col-xs-2 col-sm-3">
				<label>密码:</label>
			</div>
			<div class="col-xs-3 col-sm-9">
				<input type="password" name="password">
			</div>

			{% if i == 0 %}
			<p>用户名或密码错误！</p>
			{% endif %}
			
		</div>
		<div class="row form1">
			<div class="col-sm-3 col-xs-3"></div>
		    <div class="col-xs-3 col-sm-3">
		    	<input type="submit" name="login"  value="登录" class="btn">
		    </div>
		    <div class="col-sm-3 col-xs-3">
				<input type="submit" name="signup"  value="注册" class="btn">
			</div>
		</div>
		<div class="row form1">
			<div class="col-xs-5 col-sm-5"></div>
			<div class="col-sm-3 col-xs-3">
				<input type="submit" name="forget_pwd" value="忘记密码" class="btn">
			</div>
			<div class="col-xs-4 col-sm-4"></div>
		</div>
	</form>
</div>
<div class="row">
	<nav class="header-bar"></nav>
</div>
<div class="row con-img" style="margin-top: 3%; background-color:#3A3A62 ;color: #fff";>
	<div class="col-xs-2 col-sm-2 ">
		<img src="../static/sucai/data6.png" class="img-thumbnail" width="100%";>
	</div>
	<div class="col-xs-2 col-sm-2 content-border">
	    <h5>产品介绍</h5>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
	<div class="col-xs-2 col-sm-2">
		<img src="../static/sucai/data5.png" class="img-thumbnail" width="100%";>
	</div>
	<div class="col-xs-2 col-sm-2 content-border">
	    <h5>案例分析</h5>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
	<div class="col-xs-2 col-sm-2">
		<img src="../static/sucai/data4.png" class="img-thumbnail" width="100%";>
	</div>
	<div class="col-xs-2 col-sm-2 content-border">
	    <h5>数据统计</h5>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
</div>
<div class="row con-img" style="margin-top: 3% ;background-color:#3A3A62;color: #fff";>
	<div class="col-xs-2 col-sm-2 ">
		<img src="../static/sucai/data1.png" class="img-thumbnail" width="100%";>
	</div>
	<div class="col-xs-2 col-sm-2 content-border">
	    <h5>帮助中心</h5>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
	<div class="col-xs-2 col-sm-2">
		<img src="../static/sucai/data2.png" class="img-thumbnail" width="100%";>
	</div>
	<div class="col-xs-2 col-sm-2 content-border">
	    <h5>科普知识</h5>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
	<div class="col-xs-2 col-sm-2">
		<img src="../static/sucai/data3.png" class="img-thumbnail" width="100%";>
	</div>
	<div class="col-xs-2 col-sm-2 content-border">
	    <h5>统计展示</h5>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
	</div>
</div>
<div class="row footer">
	<div class="col-sm-5 col-xs-5"></div>
	<div class="col-xs-4 col-sm-4">
		CopyRight@2017
	</div>
</div>
</body>
</html>